/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="goBack"></a>
      <h1 class="mui-title">{{language.ChangeEmail}}</h1>
    </header>
    <div class="mui-content" style="padding-top: 70px;">
      <div class="gred">{{language.changingEmail}}</div>
      <!--<div class="gred">new Email. Current Email:</div>-->
      <div class="gred mt28">{{language.CurrentEmail}}{{language.tipNumber}}</div>
      <div style="text-align: center;padding: 18px;">
        <input class="mt8" @input="change" type="text" v-model="registerData.phone" placeholder={{language.Email}}><br>
        <input type="text" @input="change"  v-model="registerData.authCode" placeholder={{language.ETC}} class="Obtain">
        <button type="button" disabled class="mui-btn mui-btn-enter" id='Obtain' v-text="code" @tap="Obtain"></button>
      </div>
      <button id='button' type="button" disabled class="mui-btn mui-btn-SingIn" @tap="registerFn()">{{language.Change}}</button>
    </div>
  </div>
</template>
<script>
  import store from '../login-store';
  import {FastClick} from 'fastclick';
  var lan = require('./../language.json');
  import {tools} from 'tools';
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        code: (lan[window.lan] || lan['en']).ObtainCode,
        flag: true,
        count: 60,
        tipNumber: store.state.editData.email,
        language: lan[window.lan],
        registerData: {
          phone: '', // 18165785240
          authCode: '' // DAbao123
        },
        login: store.state,
        r: tools.getQueryString('r') || store.state.detailR
      };
    },
    methods: {
      goBack: function () {
        history.go(-1);
      },
      Obtain: function () {
        let [self, $dom] = [this, document.getElementById('Obtain')];
        store.ifExisted(self.registerData.phone, self.r, function () {
          $dom.setAttribute('disabled', true);
          self.code = self.language.Resend + '(' + self.count + ')';
          var fid = setInterval(function () {
            self.count = self.count - 1;
            self.code = self.language.Resend + '(' + self.count + ')';
            if (self.count === 0) {
              self.code = self.language.ObtainCode;
              self.count = 60;
              $dom.removeAttribute('disabled');
              window.clearInterval(fid);
            }
          }, 1000);
          store.Obtain(self.registerData.phone, self.r, function () {
            window.clearInterval(fid);
            self.code = self.language.ObtainCode;
            self.count = 60;
            $dom.removeAttribute('disabled');
          });
        }, 'number');
      },
      //  created 钩子在实例创建后,在reday之前调用
      created: function () {
        if (document.querySelector('head title')) {
          document.querySelector('head title').textContent = this.language.SIWTA;
        }
      },
      change: function () {
        if (this.registerData.phone) {
          document.getElementById('Obtain').removeAttribute('disabled');
        } else {
          document.getElementById('Obtain').setAttribute('disabled', true);
        };
        if (this.registerData.phone && this.registerData.authCode) {
          document.getElementById('button').removeAttribute('disabled');
        } else {
          document.getElementById('button').setAttribute('disabled', true);
        }
      },
      registerFn: function () {
        store.changePhoneFn(this.registerData, this.r, function () {
          setTimeout(function () {
            history.go(-1);
          }, 1000);
        }, 'Email');
      }
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
    },
    route: {
      data: function (data) {
        var self = this;
         var fid = setInterval(function () {
            if (document.getElementById('button')) {
               document.getElementById('button').setAttribute('disabled', true);
               document.getElementById('Obtain').setAttribute('disabled', true);
               window.clearInterval(fid);
            }
          }, 50);
        store.getUserInfo(this.r, function (value) {
          self.tipNumber = value.email;
        });
        this.registerData = {
          phone: '',
          authCode: ''
        };
      }
    },
    ready: function () {
      console.info('111');
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
